<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="../assets/styles/15.2/tab.css"/>
    </head>
    <body>
        <div class="tab-wrap">
            <div class="tab clearfix">
                <div class="tab-item cur">
                    <a href="javascript:;">选项卡1</a>
                </div>
                <div class="tab-item">
                    <a href="javascript:;">选项卡2</a>
                </div>
                <div class="tab-item">
                    <a href="javascript:;">选项卡3</a>
                </div>
            </div>
            <div class="page">
                <div class="page-item active">
                    1
                </div>
                <div class="page-item">
                    2
                </div>
                <div class="page-item">
                    3
                </div>
            </div>
        </div>
        
        
        <script type="text/javascript">
  //           var tabItem = document.getElementsByClassName('tab-item')
  //           var pageItem = document.getElementsByClassName('page-item')
  
  //           for (var i = 0; i < tabItem.length; i++){
  //               (function(j){
  //                   tabItem[j].onclick = function(){
  //                       for(var k = 0; k < tabItem.length; k++){
  //                           tabItem[k].className = 'tab-item'
  //                           pageItem[k].className = 'page-item'
  //                       }
  //                       this.className = 'tab-item cur'
  //                       pageItem[j].className = 'page-item active'
  //                   }
  //               })(i)
  //           }
  
               ;(function(){
                   var Tab = function(opt){
                       this.tabs = document.getElementsByClassName(opt.tabItem)
                       this.pages = document.getElementsByClassName(opt.pageItem)
                   
                       this.bindClick(opt.tabItem, opt.pageItem, opt.cur, opt.active)
                   }
                   
                   Tab.prototype = {
                       bindClick: function(tabItem, pageItem, cur, active){
                           var tabs = this.tabs
                           var pages = this.pages
                           
                           for (var i = 0; i < tabs.length; i++){
                               (function(j){
                                   tabs[j].onclick = function(){
                                       for(var k = 0; k < tabs.length; k++){
                                           tabs[k].className = tabItem
                                           pages[k].className = pageItem
                                       }
                                       this.className = tabItem + ' ' + cur
                                       pages[j].className = pageItem + ' ' + active
                                   }
                               })(i)
                           }
                       }
                   }
                   
                   window.Tab = Tab
               })()
               
               var tab = new Tab({
                   tabItem: 'tab-item',
                   pageItem: 'page-item',
                   cur: 'cur',
                   active: 'active'
               })
        </script>
    </body>
</html>
